<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <script type="text/javascript" src="https://raw.github.com/kriskowal/es5-shim/master/es5-shim.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="../js/hotdrink.js"></script>
  <title>Grouped Options | HotDrink Demo</title>
  <script type="text/javascript">
    var Model = function () {
      this.all = hd.variable(false);
      this.a = hd.variable();
      this.b = hd.variable();
      this.c = hd.variable();

      hd.constraint()
        .method("all", function () {
          return (this.a() === this.b() && this.b() === this.c())
            ? this.a()
            : false;
        })
        .method(["a", "b", "c"], function () {
          return [this.all(), this.all(), this.all()];
        });

      this.result = hd.command(function () {
        return JSON.stringify({ a : this.a(), b : this.b(), c : this.c() });
      });
    };

    var model = hd.model(new Model());

    $(document).ready(function () {
      hotdrink.bind(model);
    });
  </script>
</head>
<body>
  <p><input type="checkbox" name="all" id="all" data-bind="checkbox: all" /><label for="all">all</label></p>
  <p><input type="checkbox" name="a" id="a" data-bind="checkbox: a" /><label for="a">a</label></p>
  <p><input type="checkbox" name="b" id="b" data-bind="checkbox: b" /><label for="b">b</label></p>
  <p><input type="checkbox" name="c" id="c" data-bind="checkbox: c" /><label for="c">c</label></p>
  <p><span data-bind="label: result"></span></p>
</body>
</html>

